import React, { Component } from 'react';
import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

class App extends Component {
    state = {
    }

    state = {
    }

    onInit(...props){
        console.log( 'onInit.', props )
        const [editor] = props
        // You can store the "editor" and use when it is needed.
        console.log( 'Editor is ready to use!', editor );
        editor.setData( '<p>Some text.</p>' );
        //document to set toolbar
        //this.setState({toolbarChild: editor.ui.view.toolbar.element})
    }

    onChange(...props){
        console.log( 'onChange.', props )
        const [event, editor] = props
        const data = editor.getData();
        console.log( 'onChange.', event, editor, data );
    }

    onBlur(...props){
        console.log( 'Blur.', props )
        const [event, editor] = props
        const data = editor.getData();
        console.log( 'Blur.', event, editor, data );

    }

    onFocus(...props){
        console.log( 'onFocus.', props )
        const [event, editor] = props
        const data = editor.getData();
        console.log( 'Focus.', event, editor,data  );
    }



    render() {

        return (
            <div className="App">
                <h2>Using CKEditor 5 build in React</h2>
                <CKEditor
                    editor={ ClassicEditor }
                    data="<p>Hello from CKEditor 5!</p>"
                    onInit={(...props)=>this.onInit(...props)}
                    onChange={(...props)=>this.onChange(...props)}
                    onBlur={(...props)=>this.onBlur(...props)}
                    onFocus={(...props)=>this.onFocus(...props)}
                />
            </div>
        );
    }
}

export default App;
